﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManageStudent1.aspx.cs" Inherits="repeater_ManageStudent1" %>

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
	TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
	TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>管理学生信息</title>
	<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<style type="text/css">
		.grade-no
		{
			font-size: larger;
			color: Red;
			font-weight: bold;
		}
		.grade-yes
		{
			font-size: larger;
			color: Green;
			font-weight: bold;
		}
		#pageindex
		{
			color: #009900;
			width: 20px;
		}
	</style>
	<script type="text/javascript">
		function convertYYYYMMDDToDate(value) {
			// 2000-1-1
			var parts = value.split('-');
			return new Date(new Number(parts[0]), new Number(parts[1]) - 1, new Number(parts[2]));
		}
		function birthdayToAge(birthday) {
			return new Date().getFullYear() - $.panzer.convertToDate(birthday).getFullYear();
		}
		function displaySex(sex) {
			return sex ? '<span style="color: blue;">男</span>' : '<span style="color: red;">女</span>';
		}
		function displayMajor(major) {
			switch (major) {
				case 'jsj':
					return '计算机';

				case 'gsgl':
					return '工商管理';

				case 'hy':
					return '汉语';

				default:
					return '其它';
			}
		}
		function gradeToCSS(grade) {
			if (grade < 60)
				return 'no';
			else if (grade > 90)
				return 'yes';
			else
				return 'common';
		}
	</script>
</head>
<body>
	<form id="formManageStudent1" runat="server">
	<div class="title purple-title">
		管理学生信息
		<iframe src="../about.htm" frameborder="0" height="160" width="100%" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<div class="content">
		<h2>
			说明
		</h2>
		<blockquote>
			如果需要使用 Access 数据库, 请注释掉 repeater_webservice.cs 文件中的 #define XML.<br />
			<br />
			<strong>视频解说:</strong> <a href="http://www.tudou.com/programs/view/jiuV1nkeWNo/"
				target="_blank">www.tudou.com/programs/view/jiuV1nkeWNo/</a>
		</blockquote>
		<h2>
			示例
		</h2>
		<blockquote>
			<table id="list" cellpadding="7" cellspacing="0" class="ui-widget ui-corner-all ui-widget-content">
				<je:Repeater ID="studentRepeater" runat="server" Selector="'#list'" PageSize="4"
					IsVariable="true" FieldMask="{ sex: { type: 'boolean' }, birthday: { type: 'date', provider: convertYYYYMMDDToDate } }"
					FillAsync-Url="webservice.asmx" FillAsync-MethodName="FillStudentList" Updated="
				function(pe, e){
					pe.jquery.__repeater('showtip', '仅在本地修改了 ' + e.row.realname + ' 的信息, 并没有更改服务器的数据.');
				}
				">
					<HeaderTemplate>
						<thead je-class="{header}">
							<tr>
								<td>
									学号
								</td>
								<td>
									姓名
								</td>
								<td>
									年龄
								</td>
								<td>
									性别
								</td>
								<td>
									专业
								</td>
								<td>
									成绩
								</td>
								<td>
									操作
								</td>
							</tr>
						</thead>
					</HeaderTemplate>
					<TipTemplate>
						<tr>
							<td colspan="7">
								@{tip}
							</td>
						</tr>
					</TipTemplate>
					<ItemTemplate>
						<tr>
							<td>
								#{id}
							</td>
							<td>
								#{realname}
							</td>
							<td>
								#{birthday,birthdayToAge(#)}
							</td>
							<td>
								#{sex,displaySex(#)}
							</td>
							<td>
								#{major,displayMajor(#)}
							</td>
							<td class="grade-#{grade,gradeToCSS(#)}">
								#{grade}
							</td>
							<td>
								<span je-button="label='修改';" je-onclick="beginedit"></span>
							</td>
						</tr>
					</ItemTemplate>
					<EditItemTemplate>
						<tr>
							<td>
								#{id}
							</td>
							<td>
								<input je-id="realname" type="text" value="#{realname}" />
							</td>
							<td>
								<input je-id="birthday" je-datepicker="dateFormat='yy-mm-dd'" type="text" value="#{birthday,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}" />
							</td>
							<td>
								<%--
							<select je-id="sex">
								<option value="true" je-selected="#{sex}">男</option>
								<option value="false" je-selected="#{sex,!#}">女</option>
							</select>
								--%>
								<input je-id="sex" type="checkbox" je-checked="#{sex}" />
							</td>
							<td>
								<%--
							<select je-id="major">
								<option value="jsj" je-selected="'#{major}' == 'jsj'">计算机</option>
								<option value="gsgl" je-selected="'#{major}' == 'gsgl'">工商管理</option>
								<option value="hy" je-selected="'#{major}' == 'hy'">汉语</option>
							</select>
								--%>
								<input je-id="major" je-autocomplete="source=['jsj','gsgl','hy']" value="#{major}" />
							</td>
							<td>
								<input je-id="grade" type="text" value="#{grade}" />
							</td>
							<td>
								<span je-button="label='取消';" je-onclick="endedit"></span><span je-button="label='保存';"
									je-onclick="update"></span>
							</td>
						</tr>
					</EditItemTemplate>
					<FooterTemplate>
						<tfoot>
							<tr>
								<td colspan="7">
									<span je-button="label='上一页'" je-onclick="prev"></span>&nbsp;&nbsp;<span je-button="label='下一页'"
										je-onclick="next"></span>,&nbsp; 第 @{pageindex}/@{pagecount} 页, 共 @{itemcount}
									条, <span je-button="label='跳转'" je-onclick="goto,new Number(jQuery('#pageindex').val())">
									</span>到第
									<input type="text" id="pageindex" value="@{pageindex}" />
									页.
								</td>
							</tr>
						</tfoot>
					</FooterTemplate>
				</je:Repeater>
			</table>
		</blockquote>
	</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(function () {
		studentRepeater.__repeater('fill');
	});
</script>
